<!DOCTYPE html>
<html>
<head>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="js/jquery.min.js"></script>

	<title>注册博客</title>
	<style type="text/css">
		body {
			margin: 0;
			padding: 0;
		}

		.container {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 100vh;
			background: linear-gradient(to bottom right, #ff5f6d, #ffc371);
		}

		nav {
			background: linear-gradient(to bottom right, #ff5f6d, #ffc371);
			height: 50px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20px;
			width: 100%;
			box-sizing: border-box;
		}

		nav a {
			color: #222;
			font-size: 16px;
			text-decoration: none;
			margin-left: 20px;
		}

		#register-box {
			background-color: #fff;
			border-radius: 8px;
			box-shadow: 0 0 10px rgba(0,0,0,0.3);
			padding: 20px;
			width: 400px;
			box-sizing: border-box;
		}

		#h1 {
			font-size: 24px;
			margin: 0 0 20px 0;
			color: #03141a;
			text-align: center;
		}

		label {
			display: block;
			font-size: 16px;
			margin-bottom: 5px;
		}

		input[type="text"], input[type="password"], input[type="email"] {
			width: 100%;
			padding: 8px;
			font-size: 16px;
			border-radius: 4px;
			box-sizing: border-box;
			margin: 10px 0;
			border: none;
			border-bottom: 1px solid #ccc;
		}

		button[type="submit"] {
			background-color: #008CBA;
			color: #fff;
			font-size: 16px;
			padding: 10px;
			border: none;
			border-radius: 4px;
			cursor: pointer;
			display: block;
			margin-top: 20px;
			width: 100%;
		}

		.error {
			color: red;
			font-size: 14px;
			margin-top: 5px;
			display: none;
		}

		#captcha {
			margin-top: 10px;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		#captcha img {
			height: 40px;
			border: 1px solid #ccc;
			border-radius: 4px;
			margin-right: 10px;
			cursor: pointer;
		}
	</style>
</head>
<body>
    <nav>
        <span id="h1">欢迎注册博客系统~</span>
        <div>
            <a href="blog_list.html">博客主页</a>
            <a href="login3.html">登录</a>
        </div>
    </nav>
	<div class="container">
		
		<div id="register-box">
			<h1>注册</h1>
			<label for="username" >用户名:</label>
			<input type="text" id="username" name="username" required placeholder="0 ~ 10 长度以内" >

			<label for="password">密码:</label>
			<input type="password" id="password" name="password" placeholder="请输入6-8位数密码" required>

			<label for="confirm-password">确认密码:</label>
			<input type="password" id="confirm-password" name="confirm-password" minlength="6" required placeholder="请输入6-8位数重复密码">

			<label for="email">邮箱:</label>
			<input type="email" id="email" name="email" required placeholder="建议使用网易邮箱或QQ邮箱">

			<div class="form-group captcha">
				<label for="captcha">验证码:</label>
                <input type="text" id="captcha" name="captcha" required placeholder="填写邮箱验证码">
                <!-- <img src="https://via.placeholder.com/100x40.png?text=CAPTCHA" alt="CAPTCHA">
                <br>
                <label for="image-captcha">图片验证码:</label>
                <input type="text" id="image-captcha" name="image-captcha" required placeholder="请填写图形验证码"> -->
			</div>

			<button type="submit" onclick="myemail()" id="submit-code">点击发送验证码</button>
			<button type="submit" onclick="mysub()" id="submit">注册</button>
		</div>
	</div>
	<script>
        // 获取标签
        var username = jQuery("#username");
        var password = jQuery("#password");
        var password2 = jQuery("#confirm-password");
        var email = jQuery("#email");
        var captcha = jQuery("#captcha");

        // 邮箱曾正则式
        var a = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;

        function myemail() {


            // 2. 验证数据
	    	if(username.val().trim() == "" ) {
                alert("用户名不能为空");
                username.focus();
                return false;
            }
            if(username.val().length > 10) {
                alert("用户名过长, 请重新输入!");
                username.focus();
                return false;
            }

            if(password.val().trim() == "") {
                alert("密码不能为空");
                password.focus();
                return false;
            }

            if(password.val().length < 6 || password.val().length > 8) {
                alert("请输入 6-8 位数密码");
                password.focus();
                return false;
            }

            if(password2.val().trim() == "") {
                alert("请输入重复密码");
                password2.focus();
                return false;
            }

            if(password.val() != password2.val()) {
                alert("请检查两次密码是否一致!");
                password.focus();
                return false;
            }

            // 邮箱验证
            if(email.val().trim() == "") {
                alert("请输入邮箱!");
                jQuery("#submit-code").removeAttr("disabled");
                email.focus();
                return false;
            }


            var registerBtn = $('#submit-code');
            var countDown = 60; // 倒计时 60 秒
            var timer; // 定时器变量

            if(a.test(email.val())) {
                // 禁用邮件发送
                //jQuery("#submit-code").attr("disabled", "disabled");
                // 邮箱正确情况下, 点击发送邮件并
                jQuery.ajax({
                    url:"/user/email",
                    type:'post',
                    data:{'email': email.val().trim(), 'username':username.val()},
                    success:function(res) {
                        if(res.code == 200 && res.data == 1) {
                            alert("邮箱发送成功, 请注意查收!");
                            if (countDown != 60) {
                                    return; // 如果还在倒计时中，则不响应点击事件
                                }
                                registerBtn.attr('disabled', true); // 禁用注册按钮
                                timer = setInterval(function() {
                                    countDown--;
                                    if (countDown == 0) {
                                        clearInterval(timer);
                                        registerBtn.text('立即注册');
                                        registerBtn.attr('disabled', false);
                                        countDown = 60;
                                    } else {
                                        registerBtn.text('剩余 ' + countDown + ' 秒');
                                    }
                                }, 1000);
                            // 存储近浏览器
                            //localStorage.setItem('code', 1);
                            return false;
                        }else {
                            alert("邮箱发送失败 :" + res.msg);
                            jQuery("#submit-code").removeAttr("disabled");
                            return false;
                        }
                    }
                });

            }else {
                alert("请输入有效邮箱!");
                email.focus();
                return false;
            }
        }

        // $(function() {
        //     var registerBtn = $('#submit-code');
        //     var countDown = 60; // 倒计时 60 秒
        //     var timer; // 定时器变量

        //     registerBtn.click(function() {
        //         if (countDown != 60) {
        //             return; // 如果还在倒计时中，则不响应点击事件
        //         }
        //         registerBtn.attr('disabled', true); // 禁用注册按钮
        //         timer = setInterval(function() {
        //         countDown--;
        //         if (countDown == 0) {
        //             clearInterval(timer);
        //             registerBtn.text('立即注册');
        //             registerBtn.attr('disabled', false);
        //             countDown = 60;
        //         } else {
        //             registerBtn.text('剩余 ' + countDown + ' 秒');
        //         }
        //         }, 1000);
        //     });
        // });

        // var code = localStorage.getItem('code');

        // setTimeout( function() {
        //     localStorage.removeItem('code');
        //     alert("验证码已超时, 请重新发送");
        // }, 10*1000);
        
        function mysub() {

            // 2. 验证数据
	    	if(username.val().trim() == "" ) {
                alert("用户名不能为空");
                username.focus();
                return false;
            }
            if(username.val().length > 10) {
                alert("用户名过长, 请重新输入!");
                username.focus();
                return false;
            }

            if(password.val().trim() == "") {
                alert("密码不能为空");
                password.focus();
                return false;
            }

            if(password.val().length < 6 || password.val().length > 8) {
                alert("请输入 6-8 位数密码");
                password.focus();
                return false;
            }

            if(password2.val().trim() == "") {
                alert("请输入重复密码");
                password2.focus();
                return false;
            }

            if(password.val() != password2.val()) {
                alert("请检查两次密码是否一致!");
                password.focus();
                return false;
            }

            // 邮箱验证
            if(email.val().trim() == "") {
                alert("请输入邮箱!");
                jQuery("#submit-code").removeAttr("disabled");
                email.focus();
                return false;
            }

            if(captcha.val().trim() == "") {
                alert("请输入验证码");
                captcha.focus();
                return false;
            }
            if(captcha.val().length > 6) {
                alert("请输入正确验证码");
                captcha.focus();
                return false;
            }

            // 3. 冻结提交按钮防止用户多次提交
            jQuery("#submit").attr("disabled", "disabled"); // 属性设置采用键值的形式

            // 发送 ajax 先验证验证码
            jQuery.ajax({
                url:"/user/reg2",
                type:"post",
                data:{
                    'username':username.val().trim(),
                    'password':password.val().trim(),
                    'email':email.val().trim(),
                    'captcha':captcha.val().trim()
                },
                success:function(res) {
                    if(res.code == 200 && res.data == 1) {
                        alert("注册成功!");
                        location.href = "login3.html";
                    }else {
                        alert("注册失败 : " + res.msg);
                        // 恢复注册按钮
                        jQuery("#submit").removeAttr("disabled");
                        return false;
                    }
                }   
            });

            
        }
        
        
        
		
	</script>
</body>
</html>
